<template>
  <!-- 创建活动 -->
  <div v-loading="flags" class="app-container">
    <div v-if="!flags">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- 基本信息配置 -->
        <el-tab-pane label="基本信息配置" name="first" style="margin-top:20px">
          <basicInfo
            ref="second"
            :title="second"
            :propid="id"
            :first-forms="firstForm"
            @prize="prize"
          />
          <!-- <basicInfo @prize="prize" :title="second" ref="second"></basicInfo> -->
        </el-tab-pane>
        <!-- 被邀请人奖品配置 form1 form2 -->
        <el-tab-pane label="被邀请人奖品配置" name="second" style="margin-top:20px">
          <inviteePrize
            :title="third"
            :active-id="activeId"
            :propid="id"
            :invitee-prize-list="inviteePrizeList"
            @prize="prize"
          />
          <!-- <inviteePrize @prize="prize" :title="third" ref="third"></inviteePrize> -->
        </el-tab-pane>
        <el-tab-pane label="邀请人奖品配置" name="third" style="margin-top:20px">
          <inviteePrize1
            :title="fourth"
            :active-id="activeId"
            :propid="id"
            :invitee-prize-list1="inviteePrizeList1"
            @prize="prize"
          />
          <!-- <inviteePrize @prize="prize" :title="fourth" ref="fourth"></inviteePrize> -->
        </el-tab-pane>
        <el-tab-pane label="分享设置" name="fourth" style="margin-top:20px">
          <share
            :title="five"
            :share-form="shareForm"
            :propid="id"
            :active-id="activeId"
            @prize="prize"
          />
          <!-- <share @prize="prize" :title="five" ref="five"></share> -->
        </el-tab-pane>
        <el-tab-pane label="老用户参与设置" name="five" style="margin-top:20px">
          <inviteePrize2
            :title="six"
            :active-id="activeId"
            :propid="id"
            :invitee-prize-list2="inviteePrizeList2"
            @prize="prize"
          />
          <!-- <inviteePrize @prize="prize" :title="six" ref="six"></inviteePrize> -->
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import basicInfo from "@/views/invitation/editcomponent/basicInfo";
import inviteePrize from "@/views/invitation/editcomponent/inviteePrize";
import inviteePrize1 from "@/views/invitation/editcomponent/inviteePrize";
import inviteePrize2 from "@/views/invitation/editcomponent/inviteePrize";
import share from "@/views/invitation/editcomponent/share";
// import distribution from '@/views/invitation/compontents/distribution'
import { getInfo } from "@/api/invitationMange";
export default {
  name: "AddActive",
  components: {
    basicInfo,
    inviteePrize,
    inviteePrize1,
    inviteePrize2,
    share
  },
  data() {
    return {
      activeName: "first",
      submit: "submit",
      second: "second",
      third: "third",
      fourth: "fourth",
      five: "five",
      six: "six",
      obj: {
        data1: "",
        data2: "",
        data3: "",
        data4: "",
        data5: "",
        data6: ""
      },
      activeId: "",
      allInfoForm: null,
      firstForm: null,
      shareForm: null,
      flags: true,
      inviteePrizeList: null,
      inviteePrizeList1: null,
      inviteePrizeList2: null
    };
  },
  created() {
    this.id = String(this.$route.query.id);
    this.getInfos();
    this.$forceUpdate();
  },
  methods: {
    // // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      });
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
    getInfos() {
      const datas = { id: this.id };
      getInfo(datas)
        .then(res => {
          if (res.data.code == 200) {
            // console.log("res", res.data);
            this.allInfoForm = res.data.data;
            this.flags = false;
            this.formFn();
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err.msg);
        });
    },
    // 第一个表单
    formFn() {
      this.firstForm = {
        activity_name: this.allInfoForm.activity_name,
        rule_text: this.allInfoForm.rule_text,
        weex_links: this.allInfoForm.weex_links,
        mini_links: this.allInfoForm.mini_links,
        is_end: String(this.allInfoForm.is_end),
        start_time: this.allInfoForm.start_time,
        end_time: this.allInfoForm.end_time,
        bg_image_ids: this.allInfoForm.bg_img,
        res_image_ids: this.allInfoForm.res_img,
        is_distribute: this.allInfoForm.is_distribute,
        distribute_gold_num: this.allInfoForm.distribute_gold_num,
        distribute_silver_num: this.allInfoForm.distribute_silver_num,
        id: this.id
      };
      this.shareForm = {
        share_img_ids: this.allInfoForm.share_img,
        mini_img_ids: this.allInfoForm.mini_img,
        web_img_ids: this.allInfoForm.web_img,
        web_bg_img_ids: this.allInfoForm.web_bg_img,
        mini_word: this.allInfoForm.mini_word,
        web_word: this.allInfoForm.web_word
      };
      const as = { ...this.allInfoForm };
      this.inviteePrizeList = {
        invited_gold_num: as.invited_gold_num,
        invited_ticket_arr: as.invited_ticket_arr,
        invited_silver_num: as.invited_silver_num
      };
      this.inviteePrizeList1 = {
        invite_gold_num: as.invite_gold_num,
        invite_silver_num: as.invite_silver_num,
        invite_ticket_arr: as.invite_ticket_arr
      };
      this.inviteePrizeList2 = {
        is_join_old: as.is_join_old,
        old_user_ticket_arr: as.old_user_ticket_arr,
        old_res_image_ids: as.old_res_img
      };
      console.log(" this.allInfoForm", this.allInfoForm);
      console.log("this.inviteePrizeList2", this.inviteePrizeList2);
    },
    handleClick(tab, event) {
      // console.log('table.paneName', tab.paneName)
      // console.log(tab, event)
      // if (tab.paneName != 'first') {
      //   this.$refs[tab.paneName].nextBtn()
      // }
    },
    showMsg() {
      this.$message({
        showClose: true,
        message: "请先填写基本信息",
        type: "warning"
      });
      this.activeName = "first";
    },
    // 邀请人奖品设置
    prize(title, id) {
      console.log("id", id);
      if (title == "second") {
        this.activeName = title;
        this.activeId = String(id.id);
      } else if (title == "third") {
        if (id) {
          this.activeName = title;
        } else {
          this.showMsg();
        }
      } else if (title == "fourth") {
        if (id) {
          this.activeName = title;
        } else {
          this.showMsg();
        }
      } else if (title == "five") {
        // console.log('title', title)
        // console.log('id', id)
        if (id) {
          this.activeName = title;
        } else {
          this.showMsg();
        }
      }
      // if (opt.title == "second") {
      //   this.activeName = opt.title;
      //   this.obj.data1 = opt.name;
      //   delete opt.title;
      // } else if (opt.title == "third") {
      //   this.activeName = opt.title;
      //   this.obj.data2 = opt.name;
      //   delete opt.title;
      // } else if (opt.title == "fourth") {
      //   console.log("data3", this.obj.data3);
      //   this.activeName = opt.title;
      //   this.obj.data3 = opt.name;
      //   delete opt.title;
      // } else if (opt.title == "five") {
      //   console.log("data4", this.obj.data4);
      //   this.activeName = opt.title;
      //   this.obj.data4 = opt.name;
      //   delete opt.title;
      // } else if (opt.title == "six") {
      //   this.activeName = opt.title;
      //   this.obj.data5 = opt.name;
      //   delete opt.title;
      // } else if (opt.title == "submit") {
      //   console.log("888");
      //   this.obj.data6 = opt.name;
      //   console.log("obj", this.obj);
      // }
    }
  }
};
</script>
<style scoped>
.pagesCon {
  text-align: right;
  margin-top: 20px;
}
</style>
